<template>
    <div id="div01">
        <div class="login_box">
            <h1>欢迎使用报工系统</h1>
            <!--      model:表单数据对象，表单绑定的数据
                      rules：表单验证规则
                      ref：可以根据这个属性获取这个表单-->
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="uname">
                    <el-input v-model="loginForm.uname" @keyup.enter.native="login"></el-input>
                </el-form-item>
<!--                show-password：密文-->
                <el-form-item label="密码" prop="pwd" >
                    <el-input v-model="loginForm.pwd" show-password @keyup.enter.native="login"></el-input>
                </el-form-item>
                <el-form-item prop="remember" class="el-form-item__content remember-checkbox">
                    <el-checkbox v-model="remember">记住密码</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
                <div><span style="color: red">{{msg}}</span></div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "Login",
    methods: {
        login() {
            //固定this
            const self = this
            //根据ref属性获取表单
            //validate：触发表单验证
            //valid：表单验证结果，boolean类型，true表示表单验证通过，false表示验证不通过
            self.$refs['loginForm'].validate((valid) => {
                if (valid) {
                    this.$http.post('login', self.loginForm).then(res => {
                        //请求成功的回调，返回res
                        if(res.data !== '') {
                            //登录成功
                            let emp = res.data
                            //如果选择记住密码
                            if(self.remember) {
                                //将uname和pwd存入cookie中，有效期为2天
                                self.$cookies.set('uname', self.loginForm.uname, '2d')
                                self.$cookies.set('pwd', self.loginForm.pwd, '2d')
                            }
                            //将emp存入session
                            sessionStorage.setItem("emp", JSON.stringify(emp))
                            sessionStorage.setItem("pwd", self.loginForm.pwd)
                            //将员工信息存入state中
                            this.$store.commit("setEmp", emp)
                            //跳转到主页面，根据职位重定向到默认页面
                            this.$router.push({name: 'main', params: {job: this.$store.state.emp.job}})
                        } else {
                            this.msg = '用户名或密码错误';
                        }

                    }).catch(error => {
                        //请求失败的回调
                        this.$message.error('登录请求失败，请联系管理员');
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
    data() {
        //从cookie中获取用户名和密码，如果cookie中没有则赋空字符串
        let uname = this.$cookies.get('uname') == null ? '' : this.$cookies.get('uname')
        let pwd = this.$cookies.get('pwd') == null ? '' : this.$cookies.get('pwd')
        return {
            //登录表单数据
            loginForm: {
                uname: uname,
                pwd: pwd
            },
            remember : false,
            msg: '',
            rules: {
                uname: [
                    //required：true，表示必填
                    //message:不满足验证规则时的提示语
                    //trigger:验证规则的触发时机
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                pwd: [
                    //required：true，表示必填
                    //message:不满足验证规则时的提示语
                    //trigger:验证规则的触发时机
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            }
        }
    },
    beforeCreate() {
        //设置body标签的样式
        document.querySelector('body').setAttribute('style', 'margin:0')
    }
}
</script>

<style scoped>
    body {
        margin: 0;
    }
    #div01 {
        display: inline-block;
        width: 100%;
        height: 742px;
        background-image: url("../assets/img_1.png");
        background-size: 1550px
    }
    .login_box {
        width: 450px;
        height: 340px;
        position: absolute;
        left: 810px;
        top: 225px;
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 5%
    }
    h1 {
        color: #409EFF;
    }
    .demo-ruleForm {
        display: inline-block;
        position: absolute;
        top: 80px;
        left: 0;
    }
    .el-button {
        width: 285px;
    }
    .el-form-item__content {
        text-align: left;
    }
    .remember-checkbox {
        margin-bottom: 0;
    }
</style>